@charset "UTF-8";

@import '_reset';
@import '_common';

// 中间
section {
	padding: r(89) 0 r(96);
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	overflow: auto;	
	.header {
		width: $width;
		margin: 0 auto;
		h3 {
			font-size: r(30);
			margin-top: r(42);
			font-weight: bold;
			text-align: justify;
		}
		.h_date {
			display: flex;
			flex-direction: column;
			// justify-content: flex-end;
			align-items: flex-end;
			color: #c5c5c5;
			font-size: r(22);
			.date_top {
				i {
					font-size: r(22);
					margin-left: r(38);
				}
			}
			.date_bottom {
				margin-top: r(10);
				span {
					color: $color;
				}
			}
		}
		&>p {
			margin-top: r(38);
			font-size: r(20);
			text-indent: 2em;
			text-align: justify;
			line-height: 1.4;
			color: #949494;
			span {
				display: block;
			}
			.font_weight {
				font-weight: bold;
				color: black;
			}
		}
		.font_weight {
			font-weight: bold;
			color: black;
		}
		.content_img {
			width: 100%;
			margin-top: r(10);
			img {
				width: 100%;
				display: block;
			}
		}
	}
	.shang {
		border-top: r(20) solid #efefef;
		border-bottom: r(20) solid #efefef;
		p {
			width: $width;
			margin: 0 auto;
			color: #727171;
			font-size: r(18);
			height: r(80);
			line-height: r(80);
			span {
				font-size: r(20);
				font-weight: bold;
			}
		}
	}
	.share {
		width: $width;
		margin: r(38) auto;
		display: flex;
		justify-content: space-around;
		i {
			display: flex;
			justify-content: center;
			align-items: center;
			width: r(72);
			height: r(72);
			color: #c5c5c5;
			border: 1px solid #8e8e8e;
			border-radius: r(72);
			font-size: r(40);
		}
	}
	.login_pl {
		width: $width;
		margin: 0 auto;
		border-top: 1px solid #c9c9c9;
		border-bottom: 1px solid #c9c9c9;
		padding: r(78) 0;
		text-align: center;
		a {
			color: r(20);
			color: $color;
			text-decoration: underline;
		}
	}
	.btn {
		width: r(395);
		height: r(53);
		line-height: r(53);
		text-align: center;
		background-color: $color;
		color: white;
		margin: r(16) auto 0;
	}
	.comment_box {
		width: $width;
		margin: 0 auto;
		&>p {
			margin-top: r(49);
			span {
				text-decoration: underline;
			}
		}
		.c_name {
			margin-top: r(25);
			display: flex;
			align-items: center;
			.photo_img {
				width: r(50);
				height: r(50);
				border-radius: 50%;
				overflow: hidden;
				font-size: r(18);
				// background-color: $color;
				img {
					width: 100%;
					display: block;
				}
			}
			.name {
				margin-left: r(10);
			}
			.date {
				color: #d2d2d2;
				margin-left: r(10);
			}
		}
		.c_content {
			display: flex;
			justify-content: space-between;
			margin-top: r(10);
			.message {
				width: r(400);
				margin-left: r(10);
				font-size: r(24);
			}
			.date {
				color: #d2d2d2;
				font-size: r(18);
			}
		}
		.reply {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			margin-top: r(10);
			font-size: r(24);
			i {
				font-size: r(20);
				color: #b6b6b6;
			}
		}
		.r_comment {
			padding: r(20) r(15) r(20) r(15);
			background-color: #fafafa;
			font-size: r(18);
			border-bottom: 1px dotted #c9c9c9;
			.comment {
				display: flex;
				.photo_img {
					width: r(40);
					height: r(40);
					img {
						width: 100%;
						display: block;
					}
				}
				.r_name {
					margin-top: r(10);
					margin-left: r(10);
				}
				.r_content {
					margin-top: r(10);
					margin-left: r(10);
					// width: r(380);
				}
			}
			.r_date {
				margin-top: r(20);
				display: flex;
				justify-content: flex-end;
				color: #b2b2b2;
			}
		}
		.r_edit {
			padding: r(20) r(20) 0;
			background-color: #fafafa;
			.e_content {
				position: relative;
				width: 100%;
				height: r(72);
				textarea {
					width: 100%;
					height: 100%;
					border: 1px solid #efefef;
					resize: none;
					padding: r(10) r(30) r(10) r(10);
				}
				span {
					position: absolute;
					top: 50%;
					right: r(5);
					transform: translateY(-50%);
					color: #b2b2b2;
				}
			}
			button {
				width: r(172);
				height: r(45);
				line-height: r(45);
				text-align: center;
				border: none;
				font-size: r(20);
				background-color: $color;
				color: white;
				margin: r(10) 0;
			}
		}
	}
	.more {
		width: $width;
		margin: r(20) auto 0;
		text-align: center;
		padding: r(20) 0;
		border-top: 1px solid #e6e6e6;
		color: #bbbbbb;
	}
}